<template>
	<barLayout navTitle="活动报名" isBack :showHomeIcon="false">
		<view class="signUp flex-main">
			<view class="main">
				<text class="title">报名信息</text>
				<view class="form">
					<view class="form-item">
						<view>活动</view>
						<view>
							{{ activityName }}
							<!-- 	<input class="uni-input" v-model="form.activityName" @input="clearActivityName" placeholder="请输入活动名称" placeholder-class="placeholder" />
							<icon v-if="showAclearIcon" @click="clearAIcon" type="clear" size="12" style="margin-left: 10px;" /> -->
						</view>
					</view>

					<view class="form-item">
						<view>
							<text class="requireText">*</text>
							<text>姓名</text>
						</view>
						<view class="uni-input-wrapper flex-row">
							<input class="uni-input" v-model="form.playerName" @input="clearName" placeholder="请输入姓名" placeholder-class="placeholder" />
							<icon v-if="showNclearIcon" @click="clearNIcon" type="clear" size="12" style="margin-left: 10px;" />
						</view>
					</view>
					<view class="form-item">
						<view>
							<text class="requireText">*</text>
							<text>性别</text>
						</view>
						<radio-group @change="genderChange">
							<label class="radio">
								<radio value="female" checked="true" color="#FF6414" style="transform:scale(0.7)" />
								女
							</label>
							<label class="radio" style="margin-left: 20px;">
								<radio value="male" style="transform:scale(0.7)" color="#FF6414" />
								男
							</label>
						</radio-group>
					</view>

					<view class="form-item">
						<view>年级</view>
						<picker @change="gradeChange" :value="gradeIndex" :range="gradeList" range-key="name" @cancel="cancelPick" @click="clickPick">
							<view class="uni-input">
								{{ gradeList[gradeIndex].name }}
								<image v-if="!isUpArrow" src="https://edu.c-eplus.com/activityfiles/miniapp/static/image/downArrow.png" class="arrow" mode="aspectFit"></image>
								<image v-if="isUpArrow" src="https://edu.c-eplus.com/activityfiles/miniapp/static/image/upArrow.png" class="arrow" mode="aspectFit"></image>
							</view>
						</picker>
					</view>
				</view>

				<view @click="submit" class="submitBtn">提交报名</view>
			</view>
		</view>

		<tui-modal custom :show="modelShow" backgroundColor="rgba(80, 80, 80, 0.8)" width="50%" maskBgColor="transparent">
			<view class="signUpModal">
				<image src="https://edu.c-eplus.com/activityfiles/miniapp/static/image/tick.png" class="tick"></image>
				<view>报名成功</view>
				<view>请留意大屏信息</view>
			</view>
		</tui-modal>
	</barLayout>
</template>

<script>
import barLayout from '@/pages/layout/barLayout.vue';
import tuiModal from '@/components/thorui/tui-modal/tui-modal.vue';
import { signup } from '@/api/activity.js';
import { getGradeList } from '@/utils/util.js';
export default {
	components: {
		barLayout,
		tuiModal
	},
	data() {
		return {
			activityName: '',
			form: {
				playerName: '',
				gender: 'female',
				gardeCode: '',
				dcActivityId: ''
			},
			// showAclearIcon: false,
			showNclearIcon: false,
			gradeIndex: 0,
			isUpArrow: false,
			modelShow: false,
			gradeList: []
		};
	},
	onLoad(params) {
		this.gradeList = getGradeList();
		this.form.gardeCode = this.gradeList[0].gardeCode;
		if (params && params.title) {
			this.activityName = params.title;
		}
		if (params && params.dcActivityId) {
			this.form.dcActivityId = params.dcActivityId;
		}
	},
	methods: {
		submit() {
			let { playerName } = this.form;
			if (!playerName) {
				return uni.showToast({
					title: '姓名不能为空！',
					icon: 'none'
				});
			} else {
				uni.showLoading();
				signup({
					...this.form
				}).then(res => {
					uni.hideLoading();
					let { data, success, errMsg, errCode } = res.data;
					if (success) {
						this.modelShow = true;
						setTimeout(() => {
							this.modelShow = false;
							uni.navigateBack();
						}, 2000);
					} else {
						uni.showModal({
							content: errMsg,
							showCancel: false,
							success: function(res) {
								if (errCode == '1005001002') {
									uni.navigateBack();
								}
							}
						});
					}
				});
			}
		},
		clickPick() {
			this.isUpArrow = true;
		},
		cancelPick() {
			this.isUpArrow = false;
		},
		gradeChange(e) {
			this.gradeIndex = e.detail.value;
			this.form.gardeCode = this.gradeList[e.detail.value].gardeCode;
			this.isUpArrow = false;
		},
		genderChange(e) {
			this.form.gender = e.detail.value;
		},
		// clearAIcon() {
		// 	this.form.activityName = '';
		// 	this.showAclearIcon = false;
		// },
		// clearActivityName(event) {
		// 	this.form.activityName = event.detail.value;
		// 	if (event.detail.value.length > 0) {
		// 		this.showAclearIcon = true;
		// 	} else {
		// 		this.showAclearIcon = false;
		// 	}
		// },
		clearName(event) {
			this.form.playerName = event.detail.value;
			if (event.detail.value.length > 0) {
				this.showNclearIcon = true;
			} else {
				this.showNclearIcon = false;
			}
		},
		clearNIcon() {
			this.form.playerName = '';
			this.showNclearIcon = false;
		}
	}
};
</script>

<style></style>
